<template>
  <div class="AddEmployee">
    <el-form class="AddEmployee_form" :rules="rules" :model="addForm" ref="addForm" label-width="100px">
      <div style="padding-left: 10%;margin-bottom: 2%;margin-top: 3%"><b style="color: #0BB278">| </b>个人信息</div>
      <!--个人信息左侧-->
      <el-col :span="12" class="AddEmployee_form_col">
        <el-form-item label="姓名" prop="employeeName">
          <el-input placeholder="请输入..." size="small" style="width: 300px" v-model="addForm.employeeName"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="employeePhone">
          <el-input size="small" style="width: 300px" placeholder="请输入..." v-model="addForm.employeePhone">
            <el-select style=" width: 80px" v-model="phoneAreaCode" slot="prepend" placeholder="请选择">
              <el-option-group
                v-for="group in phoneOptions"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                  <span>{{ item.value }}</span>
                  <span>{{ item.label }}</span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="employeeIDNum">
          <el-input placeholder="请输入..." size="small" style="width: 300px" v-model="addForm.employeeIDNum"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="employeeMaritalStatus">
          <el-radio v-model="addForm.employeeMaritalStatus" label="已婚">已婚</el-radio>
          <el-radio v-model="addForm.employeeMaritalStatus" label="未婚">未婚</el-radio>
        </el-form-item>
        <el-form-item label="政治面貌" prop="employeePoliticalStatus">
          <el-select size="small" style="width: 300px" clearable v-model="addForm.employeePoliticalStatus"
                     placeholder="请选择">
            <el-option value="群众">群众</el-option>
            <el-option value="党员">党员</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属专业" prop="employeeMajor">
          <el-input placeholder="请输入..." size="small" style="width: 300px" v-model="addForm.employeeMajor"
                    clearable></el-input>
        </el-form-item>
      </el-col>
      <!--个人信息右侧-->
      <el-col :span="12" class="AddEmployee_form_colTwo">
        <el-form-item label="性别" prop="employeeGender">
          <el-radio-group v-model="addForm.employeeGender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人邮箱" prop="employeeEmail">
          <el-input placeholder="请输入..." size="small" style="width: 300px" v-model="addForm.employeeEmail"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="联系地址" style="width: 400px" required>
          <el-col :span="12">
            <el-form-item prop="cascaderAddress">
              <Cascader style="width: 150px;float: left" @address="getAddress"></Cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="detailedAddress">
              <el-input placeholder="请输入详址" size="small" style="width: 145px; margin-left: 5px"
                        v-model="addForm.detailedAddress"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="民族" prop="employeeEthnic">
          <el-input placeholder="请输入..." size="small" style="width: 300px" v-model="addForm.employeeEthnic"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="最高学历" prop="employeeMaxEducation">
          <el-select size="small" style="width: 300px" clearable v-model="addForm.employeeMaxEducation"
                     placeholder="请选择">
            <el-option value="初中及以下">初中及以下</el-option>
            <el-option value="高中">高中(职高)</el-option>
            <el-option value="本科">本科</el-option>
            <el-option value="研究生">研究生</el-option>
            <el-option value="硕士">硕士</el-option>
            <el-option value="博士及以上">博士及以上</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业院校" prop="employeeGraduatedSchool">
          <el-select allow-create size="small" style="width: 300px" filterable remote
                     v-model="addForm.employeeGraduatedSchool"
                     clearable placeholder="请选择" :remote-method="selSchool">
            <el-option
              v-for="(item , index) in universityOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <div style="padding-left: 10%;margin-bottom: 2%;margin-top: 3%"><b style="color: #0BB278">| </b>入职信息</div>
      <!--入职信息左侧-->
      <el-col :span="12" class="AddEmployee_form_col">
        <el-form-item label="入职日期" prop="employeeEntryDate">
          <el-date-picker
            style="width: 300px"
            size="small"
            v-model="addForm.employeeEntryDate"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门" prop="employeeDepartment">
          <el-select size="small" style="width: 300px" @change="upPost" clearable filterable
                     v-model="addForm.employeeDepartment" placeholder="请选择">
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.deptName"
              :value="item.deptID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作性质" prop="employeeWorkNature">
          <el-select size="small" style="width: 300px;" clearable v-model="addForm.employeeWorkNature">
            <el-option value="全职">全职</el-option>
            <el-option value="兼职">兼职</el-option>
            <el-option value="外包">外包</el-option>
            <el-option value="派遣">派遣</el-option>
            <el-option value="退休返聘">退休返聘</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="聘用来源" prop="employeeEmploymentForm">
          <el-select size="small" style="width: 300px;" clearable v-model="addForm.employeeEmploymentForm">
            <el-option value="社招">社招</el-option>
            <el-option value="校招">校招</el-option>
            <el-option value="网络">网络</el-option>
            <el-option value="内推">内推</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="入职邀请" >
          <el-switch
            v-model="addForm.Onboarding"
            active-color="#13ce66"
            inactive-color="#dcdfe6">
          </el-switch>
        </el-form-item>
      </el-col>
      <!--入职信息右侧-->
      <el-col :span="12" class="AddEmployee_form_colTwo">
        <el-form-item label="试用期" prop="employeeProbation" :required="isEmployeeProbation">
          <el-select :disabled="!isEmployeeProbation" size="small" style="width: 195px" clearable
                     v-model="addForm.employeeProbation"
                     placeholder="请选择">
            <el-option
              v-for="(item , index) in employeeProbationOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select :disabled="!isEmployeeProbation" @change="updateEmployeeContractPeriod" size="small"
                     style="width: 105px"
                     v-model="employeeProbationUnit"
                     placeholder="请选择">
            <el-option value="个月">个月</el-option>
            <el-option value="天">天</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="employeePosition">
          <el-select size="small" style="width: 300px" clearable filterable v-model="addForm.employeePosition"
                     placeholder="请选择">
            <el-option
              v-for="(item , index) in postOptions"
              :key="index"
              :label="item.positionName"
              :value="item.positionNum">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工状态" prop="employeeStatus">
          <el-select size="small" style="width: 300px" @change="upEmployeeProbation" clearable
                     v-model="addForm.employeeStatus">
            <el-option value="试用">试用</el-option>
            <el-option value="正式">正式</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同期限" prop="employeeContractPeriod">
          <el-date-picker
            style="width: 300px"
            size="small"
            v-model="addForm.employeeContractPeriod"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <!--确认-->
      <el-col :span="24" class="AddEmployee_form_colThree">
        <el-form-item>
          <el-button class="buttonStyle" type="primary" @click="confirm">确认添加</el-button>
          <el-button class="buttonStyle" type="primary" @click="confirmAdd">确认并继续添加</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>

</template>

<script>

import Cascader from "../../components/cascader";

export default {
  inject:['reload'],
  name: "AddEmployee",
  components: {Cascader},
  data() {
    //验证区域
    var employeePhoneVerify = (rule, value, callback) => {
      if (value == undefined || Object.keys(value).length == 0) {
        callback(new Error('手机号不可为空'));
      } else {
        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(value)) {
          callback(new Error('输入手机号格式有误'));
        } else {
          callback();
        }
      }
    }
    var employeeEmailVerify = (rule, value, callback) => {
      if (value.indexOf("@") == -1 || value.indexOf("@") == 0) {
        callback(new Error('邮箱格式有误'));
      } else {
        callback();
      }
    }
    var detailedAddressVerify = (rule, value, callback) => {
      if (value == undefined || Object.keys(value).length == 0) {
        callback(new Error('请填写完整的联系地址'));
      } else {
        callback();
      }
    }
    var employeeProbationVerify = (rule, value, callback) => {
      let that = this;
      value = value + "";
      if (that.isEmployeeProbation) {
        if (value == undefined || Object.keys(value).length == 0) {
          callback(new Error('请填写试用期时长'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    return {
      //大学名称
      //新增列表
      addForm: {
        //个人信息-----------------
        //姓名
        employeeName: '',
        //性别
        employeeGender: '',
        //电话
        employeePhone: '',
        //邮箱
        employeeEmail: '',
        //证件号码
        employeeIDNum: '',
        //联系地址
        employeeAddress: '',
        //婚姻状况
        employeeMaritalStatus: '',
        //民族
        employeeEthnic: '',
        //政治面貌
        employeePoliticalStatus: '',
        //最高学历
        employeeMaxEducation: '',
        //所属专业
        employeeMajor: '',
        //毕业院校
        employeeGraduatedSchool: '',
        //入职信息-----------------
        //入职时间
        employeeEntryDate: '',
        //试用期
        employeeProbation: '',
        //部门
        employeeDepartment: '',
        //职位
        employeePosition: '',
        //工作性质
        employeeWorkNature: '',
        //员工状态
        employeeStatus: '',
        //工号
        employeeJobNumber: '',
        //聘用形式
        employeeEmploymentForm: '',
        //合同期限
        employeeContractPeriod: '',
        //入职登记邀请
        Onboarding: false,
        //前台使用
        //下拉地址
        cascaderAddress: '',
        //填写的详细地址
        detailedAddress: '',

      },
      //验证信息
      rules: {
        employeeName: [
          {required: true, message: '姓名不能为空', trigger: "blur"}
        ],
        employeePhone: [
          {required: true, validator: employeePhoneVerify, trigger: 'blur'}
        ],
        employeeIDNum: [
          {required: true, message: '请输入证件号', trigger: 'blur'},
          {min: 18, max: 18, message: '证件号码长度为18位', trigger: 'blur'}
        ],
        employeeGender: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        employeeEmail: [
          {required: true, message: '邮箱不可为空', trigger: "blur"},
          {validator: employeeEmailVerify, trigger: 'blur'}
        ],
        cascaderAddress: [
          {required: true, message: '请选择地址', trigger: 'change'}
        ],
        detailedAddress: [
          {validator: detailedAddressVerify, trigger: 'blur'}
        ],
        employeeMaxEducation: [
          {required: true, message: '请选择最高学历', trigger: 'change'}
        ],
        employeeEntryDate: [
          {required: true, message: '请选择入职日期', trigger: 'change'}
        ],
        employeeDepartment: [
          {required: true, message: '请选择部门', trigger: 'change'}
        ],
        employeeWorkNature: [
          {required: true, message: '请选择工作性质', trigger: 'change'}
        ],
        employeeEmploymentForm: [
          {required: true, message: '请选择聘用来源', trigger: 'change'}
        ],
        employeeProbation: [
          {required: false, validator: employeeProbationVerify, trigger: 'blur'}
        ],
        employeePosition: [
          {required: true, message: '请选择岗位', trigger: 'change'}
        ],
        employeeStatus: [
          {required: true, message: '请选择员工状态', trigger: 'change'}
        ],
        employeeContractPeriod: [
          {required: true, message: '请选择合同期限', trigger: 'change'}
        ]
      },
      //默认手机区号：
      phoneAreaCode: '+86',
      //手机号下拉列表
      phoneOptions: [
        {
          label: '常用',
          options: [
            {
              value: '+86',
              label: '中国大陆',
            },
            {
              value: '+853',
              label: '中国澳门',
            },
            {
              value: '+886',
              label: '中国台湾',
            },
            {
              value: '+852',
              label: '中国香港',
            },
          ]
        }
      ],
      //大学名称下拉
      universityOptions: [],
      //时间快捷参数
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //试用期单位
      employeeProbationUnit: '个月',
      //试用期天/月数下来
      employeeProbationOptions: [
        {
          value: 1,
          label: 1,
        },
        {
          value: 2,
          label: 2,
        },
        {
          value: 3,
          label: 3,
        },
        {
          value: 4,
          label: 4,
        },
        {
          value: 5,
          label: 5,
        },
        {
          value: 6,
          label: 6,
        },
        {
          value: 7,
          label: 7,
        },
        {
          value: 8,
          label: 8,
        },
        {
          value: 9,
          label: 9,
        },
        {
          value: 10,
          label: 10,
        },
        {
          value: 11,
          label: 11,
        },
        {
          value: 12,
          label: 12,
        },

      ],
      //部门树
      departmentOptions: [],
      postOptions: [],
      isEmployeeProbation: false,
    }
  },

  mounted() {
    //获取部门职位树
    this.seldePostTree();
  },

  methods: {
    //获取地址
    getAddress(data) {
      this.addForm.cascaderAddress = data;
    },


    //改变试用期天数的下来列表信息
    updateEmployeeContractPeriod() {
      this.employeeProbationOptions = [];
      this.addForm.employeeProbation = '';
      if (this.employeeProbationUnit == '个月') {
        this.employeeProbationOptions = [
          {
            value: 1,
            label: 1,
          },
          {
            value: 2,
            label: 2,
          },
          {
            value: 3,
            label: 3,
          },
          {
            value: 4,
            label: 4,
          },
          {
            value: 5,
            label: 5,
          },
          {
            value: 6,
            label: 6,
          },
          {
            value: 7,
            label: 7,
          },
          {
            value: 8,
            label: 8,
          },
          {
            value: 9,
            label: 9,
          },
          {
            value: 10,
            label: 10,
          },
          {
            value: 11,
            label: 11,
          },
          {
            value: 12,
            label: 12,
          },

        ];
      } else {
        for (var i = 15; i <= 90; i++) {
          this.employeeProbationOptions.push({
            value: i,
            label: i,
          })
        }

      }
    },


    //联级改变职位
    upPost(data) {
      this.addForm.employeePosition = '';
      this.postOptions = [];
      for (var de of this.departmentOptions) {
        if (this.addForm.employeeDepartment == de.deptID) {
          this.postOptions = de.positionList;
          break;
        }
      }
    },


    //获取部门职位树
    seldePostTree() {
      let params = new URLSearchParams();
      this.$api.seldePostTree(params)
        .then(res => {
          this.departmentOptions = res.data;
          for (let de of res.data) {
            if (de.deptName == this.addForm.employeeDepartment) {
              this.postOptions = de.positionList;
            }
          }
        })
        .catch(err => {
          this.$message.error("页面出错，请联系管理员")
        })
    },


    //获取院校
    selSchool(query) {
      let params = new URLSearchParams();
      params.append("keyWords", query);
      this.$api.selSchool(params)
        .then(res => {
          if (res.code === "200") {
            this.universityOptions = [];
            res.data.forEach(rs => {
              this.universityOptions.push({
                value: rs.baseId,
                label: rs.baseSchoolName
              })
            })
          } else {
            this.universityOptions = [];
          }
        })
    },


    //监听是否为试用期
    upEmployeeProbation(data) {
      if (data) {
        if (data == "试用") {
          this.isEmployeeProbation = true;
        } else {
          this.addForm.employeeProbation = "";
          this.isEmployeeProbation = false;
        }
      } else {
        this.isEmployeeProbation = false;
      }
    },


    //确认添加
    confirm() {
      debugger
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return;
        }
        debugger
        this.addForm.employeeAddress = this.addForm.cascaderAddress+this.addForm.detailedAddress;
        this.addForm.employeePhone = this.phoneAreaCode + this.addForm.employeePhone;
        console.log(this.addForm);
        var params = new URLSearchParams();
        params.append("userName" , sessionStorage.getItem("userName"));
        params.append("employeeProbationUnit" , this.employeeProbationUnit);
        params.append("employee" , JSON.stringify(this.addForm));
        this.$api.addEmployee(params)
        .then((res) =>{
          if(res.code == "200"){
            this.$message.success("新增成功！");
          }else{
            this.$message.error(res.msg);
          }
        })
      })
    },


    //确认并继续添加
    confirmAdd() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return;
        }
        this.reload();
      })
    },

  },
}
</script>

<style scoped>
.AddEmployee {
  width: 100%;
  height: 1024px;
}

.AddEmployee_form {
  width: 100%;
  height: 100%;
}

.AddEmployee_form_col {
  padding-left: 17%;
  /*padding-top: 20px;*/
  height: 45%
}

.AddEmployee_form_colTwo {
  padding-left: 5%;
  /*padding-top: 20px;*/
  height: 45%
}

.AddEmployee_form_colThree {
  height: 10%;
  width: 100%;
  padding-left: 35%;
}
</style>
<style>
.AddEmployee .el-form-item__label {
  font-size: 15px !important;

}

.AddEmployee .el-radio__input.is-checked .el-radio__inner {
  border-color: #0BB278;
  background: #0BB278;
}

.AddEmployee .el-radio__input.is-checked + .el-radio__label {
  color: #0BB278;
}

.AddEmployee .el-select-dropdown__item.selected {
  color: #0BB278;
  font-weight: 700;
}

.AddEmployee .el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: #0BB278;
  outline: 0;
}

.AddEmployee .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
  color: #0BB278;
  font-weight: 700;
}

.AddEmployee .el-date-table td.current:not(.disabled) span {
  color: #FFF;
  background-color: #0BB278;
}

.AddEmployee .el-date-table td.today span {
  color: #0BB278;
  font-weight: 700;
}

.AddEmployee .el-select .el-input__inner:focus {
  border-color: #0BB278;
}

.AddEmployee .el-select .el-input.is-focus .el-input__inner {
  border-color: #0BB278;
}

.AddEmployee .buttonStyle {
  background-color: #0BB278;
  border-color: #0BB278;
  margin-right: 5%;
}

.el-select-dropdown__item.selected {
  color: #0BB278 !important;
  font-weight: 700;
}

.el-date-table td.today span {
  color: #0BB278;
  font-weight: 700;
}

.el-date-table td.available:hover {
  color: #0BB278;
}

.el-date-table td.current:not(.disabled) span {
  color: #FFF;
  background-color: #0BB278;
}
</style>
